<template>
  <view class="cates">
    <SearchInput class="search"></SearchInput>
    <view class="cates_container">
      <view class="left_menu">
        <view
          class="menu_item"
          v-for="(item, index) in leftMenus"
          :key="item"
          @click="currenIndex(index)"
          :class="index === current ? 'active' : ''"
          >{{ item }}</view
        >
      </view>
      <view class="right_menu">
        <view class="good_gorund" v-for="item in goods" :key="item.cat_name">
          <view class="good_gorund_title">{{ item.cat_name }}</view>
          <view class="goodList">
            <navigator
              class="good_gorund_item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
              :url="`/pages/goodList/goodList?cid=${item2.cat_id}`"
            >
              <u-image
                mode="scaleToFill"
                width="120"
                height="120"
                :src="item2.cat_icon"
              ></u-image>
              <view class="item_title">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      leftMenus:[],
      goods:[],
      current: 0,
    };
  },
  onLoad() {
    this.getCategors();
  },
  methods: {
    async getCategors() {
      this.categorys = await this.$u.http.get("/categories");
      this.leftMenus = this.categorys.map(item => item.cat_name)
      this.goods = this.categorys[this.current].children
    },
    currenIndex(index){
      this.current = index
      this.goods = this.categorys[this.current].children
    }
  },
  
};
</script>

.<style lang="scss">
.search {
  height: 100rpx;
}
.cates_container {
  display: flex;
  height: calc(100vh - 100rpx);
  overflow: hidden;
  .left_menu {
    width: 182rpx;
    text-align: center;
    overflow: auto;
    .menu_item {
      color: #585858;
      font-size: 28rpx;
      line-height: 2;
      background-color: #f3f3f3;
    }
    .active {
      color: $theme-color;
      background-color: #fff;
      border-left: 4rpx solid $theme-color;
    }
  }
  .right_menu {
    flex: 1;
    overflow: auto;
    .good_gorund {
      .good_gorund_title {
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &::after,&::before{
          content: '—';
          padding: 0 5rpx;
        }
      }
      .goodList {
        display: flex;
        flex-wrap: wrap;
        .good_gorund_item {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}
</style>